<template>
  <div class="right-bar" @click.stop>
    <div class="rightbar-item">
      <div class="avatar-border">
        <img src="../../static/img/2.jpg" alt="">
        <span class="iconfont icon-jia"></span>
      </div>
    </div>
    <div class="item-icon" @click="aixin">
      <span class="iconfont icon-aixin" :class="dianzan==true?'active':''">
        <p>18.0w</p>
      </span>
    </div>
    <div class="item-icon" @click.stop="showCom($event)">
      <span class="iconfont icon-tubiaozhizuo-">
        <p>18.0w</p>
      </span>
    </div>
    <div class="item-icon">
      <span class="iconfont icon-fenxiang">
        <p>18.0w</p>
      </span>
    </div>
    <div class="rightbar-item">
      <div class="right-music">
        <img src="../../static/img/3.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:["showComment"],
  data () {
    return {
      dianzan:false  
    }
  },
  methods: {
    showCom(e){
      e.preventDefault();
      this.$emit('changeCom',this.showComment);
    },
    aixin(){
      if (this.dianzan==true) {
        this.dianzan=false
      }else{
        this.dianzan = true
      }
      
    }
  }
}
</script>
<style scoped>
.right-bar{
  z-index: 9999;
}
.right-bar .rightbar-item{
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}
.avatar-border{
  width: 50px;
  height: 50px;
  border: 1px solid white;
  border-radius: 50%;
  position: relative;
}
.avatar-border img{
  position: absolute;
  width: 49px;
  height: 49px;
  border-radius: 50%;
}
.avatar-border .icon-jia{
  color: #fe2c5a;
  position: absolute;
  font-size: 20px;
  top: 49px;
  left: 50%;
  margin: -10px;
}
.right-bar .item-icon{
  height: 60px;
  text-align: center;
  padding-top: 10px;
}

.item-icon .iconfont{
  color: white;
  font-size: 30px;  
}
.item-icon .active{
  color: red;
}
.item-icon p{
  color: #fff;
  font-size: 14px;
}
.rightbar-item .right-music{
  height: 54px;
  width: 54px;
  background: #2e2e2e;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: round 6s 0s linear infinite;
}
.right-music img{
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
@keyframes round{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}
</style>